<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 在线地图叠加滤镜</title>
    <script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script>
    <link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css">
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            cursor: pointer;
        }
        .blueLayer {
            filter: grayscale(100%) invert(100%) sepia(15%) hue-rotate(180deg) saturate(1600%) brightness(70%) contrast(90%);
        }
        .filter-control {
            position: absolute;
            top: 10px;
            right: 200px;
            background: white;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .filter-control input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .filter-control label {
            font-size: 14px;
            cursor: pointer;
            user-select: none;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div class="filter-control">
        <input type="checkbox" id="filterToggle" checked>
        <label for="filterToggle">启用滤镜</label>
    </div>
</body>
    <script>
        var crs = L.CRS.EPSG3857;
        var map = L.map("map",{
            crs: crs,
            center:[31.1808, 121.6555],
            zoom:11
        });

        // 高德矢量地图
        var amap_vector = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            className:"blueLayer",
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })

        // 高德矢量地图（大字号）
        var amap_vector_big_font = L.tileLayer('http://wprd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
            className:"blueLayer",
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })

        // 高德影像地图
        var amap_satellite = L.tileLayer('http://wprd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}', {
            className:"blueLayer",
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })
        
        // 高德注记（配合影像地图一起使用）
        var amap_label = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })

        // 腾讯矢量地图
        var tencent_satellite = L.tileLayer('https://rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={-y}&styleid=0&version=256', {
            className:"blueLayer",
            subdomains: ['0','1', '2', '3'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })
        
        // 测试天地图矢量瓦片，需请填写天地图API
        var tiandituToken = '';
        var tianditu_vector = L.tileLayer('https://t{s}.tianditu.gov.cn/vec_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}&tk=' + tiandituToken, {
            className:"blueLayer",
            subdomains: ['0','1', '2', '3','4', '5', '6','7'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })

        // 天地图注记（配合天地图矢量瓦片一起使用）
        var tianditu_vector_label = L.tileLayer('https://t{s}.tianditu.gov.cn/cva_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cva&tilematrix={z}&tilerow={y}&tilecol={x}&tk=' + tiandituToken, {
            className:"blueLayer",
            subdomains: ['0','1', '2', '3','4', '5', '6','7'],
            minZoom: 1,
            maxZoom: 22,
            maxNativeZoom: 18,
            zIndex:-1
        })

        map.addLayer(amap_vector);

        var baseMaps = {
            "高德地图_矢量": amap_vector,
            "高德地图_矢量_大字体": amap_vector_big_font,
            "高德地图_影像": amap_satellite,
            "腾讯地图_矢量": tencent_satellite,
            "天地图_矢量（需填写TK）": tianditu_vector
        };

        var overlayMaps = {
            "高德地图_标注": amap_label,
            "天地图_注记（需填写TK）":tianditu_vector_label
        };

        var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

        // 滤镜控制
        document.getElementById('filterToggle').addEventListener('change', function(e) {
            const layers = Object.values(baseMaps).concat(Object.values(overlayMaps));
            layers.forEach(layer => {
                const container = layer.getContainer();
                if (container) {
                    if (e.target.checked) {
                        container.classList.add('blueLayer');
                    } else {
                        container.classList.remove('blueLayer');
                    }
                }
            });
        });
    </script>
</body>
</html>